
import { FC, Suspense } from 'react'

import { RouterList } from '../utils/types'

import { Switch, Route, Redirect } from 'react-router-dom'

const RouteView: FC<RouterList> = ({ routeList }) => {
    // console.log(routeList);
    // 非
    let arr = routeList.filter(item => !item.to)
    let str = routeList.filter(item => item.to)[0]
    
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Switch>
                {
                    arr.length > 0 && arr ? arr.map((item, index) => {
                        return <Route
                            key={index}
                            path={item.path}
                            render={routeProps => {
                                let Com = item.component
                                if (item.children) {
                                    return <Com
                                        {...routeProps}
                                        routeList={item.children}
                                        navLink={item.children.filter(a => !a.to)}
                                    ></Com>
                                }
                                return <Com {...routeProps}></Com>
                            }}
                        ></Route>
                    }) : null
                }
                {
                    str ? <Redirect to={str.to as string} from={str.from}></Redirect> : null
                }
            </Switch>
        </Suspense>
    )
}
export default RouteView